﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Example</title>
    <style>
        #diagramContainer{
            padding: 21px;
            width: 80%;
            height: 199px;
            border: 1px solid gray;
            background-image: url(http://freedevelopertutorials.azurewebsites.net/wp-content/uploads/2015/06/grid.png);
            background-repeat: repeat;
        }

        .item{
            position: absolute;
            height: 80px;
            width: 80px;
            border: 1px solid blue;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="diagramContainer" style="height:680px; width:800px;"> 
        <div id="rubberband" style="border:1px solid green; display:none;">

        </div>
        <div id="item_left" class="item"></div>
        <div id="item_right" class="item" style="left:150px;"></div>
    </div>
    <p> Click (left mousebutton) and drag to select items with the rubberband. You can even drag multiple items at once!</p>
    <p><a href="http://www.freedevelopertutorials.com/jsplumb-tutorial/introduction/">Visit the full jsPlumb-Tutorial</a> to learn it and see many more interesting examples.</p>
    <script src="http://www.freedevelopertutorials.com/statics/dom.jsPlumb-1.7.5-min.js"></script>

    <script>
        jsPlumb.ready(function () {
            jsPlumb.connect({
                source: "item_left",
                target: "item_right",
                endpoint: "Rectangle"
            });

            jsPlumb.draggable("item_left", { grid: [10, 10] });
            jsPlumb.draggable("item_right", { grid: [10, 10] });
        })
    </script>
</body>
</html>
